{% extends "base_generic.html" %}

{% block content %}
  <div class="detail-header">
    <h1><i class="fas fa-book me-2"></i>图书列表</h1>
  </div>
  
  <div class="detail-section mb-4">
    <h4>搜索图书</h4>
    <form method="get" class="row g-3">
      <div class="col-md-4">
        {{ search_form.query.label_tag }}
        {{ search_form.query }}
      </div>
      <div class="col-md-3">
        {{ search_form.genre.label_tag }}
        {{ search_form.genre }}
      </div>
      <div class="col-md-3">
        {{ search_form.rating.label_tag }}
        {{ search_form.rating }}
      </div>
      <div class="col-md-2">
        <label class="form-label">&nbsp;</label>
        <button type="submit" class="btn btn-primary w-100">搜索</button>
      </div>
    </form>
  </div>
  
  {% if book_list %}
    <div class="row">
      {% for book in book_list %}
        <div class="col-md-4 col-lg-3 mb-4">
          <div class="book-card">
            <div class="book-card-img">
              {% if book.cover %}
                <img src="{{ book.cover.url }}" alt="{{ book.title }}">
              {% else %}
                <div class="d-flex align-items-center justify-content-center h-100">
                  <i class="fas fa-book fa-3x"></i>
                </div>
              {% endif %}
            </div>
            <div class="book-card-body">
              <h5 class="book-card-title">{{ book.title }}</h5>
              <p class="book-card-author">{{ book.author }}</p>
              
              <div class="book-card-rating">
                {% with ''|center:book.get_average_rating as range %}
                  {% for _ in range %}
                    <i class="fas fa-star"></i>
                  {% endfor %}
                {% endwith %}
                ({{ book.get_average_rating|floatformat:1 }})
              </div>
              
              <div class="d-flex justify-content-between align-items-center mt-3">
                <a href="{{ book.get_absolute_url }}" class="btn btn-primary btn-sm">查看详情</a>
                <div>
                  <span class="me-2"><i class="fas fa-heart"></i> {{ book.total_favorites }}</span>
                  <span><i class="fas fa-thumbs-up"></i> {{ book.total_likes }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="alert alert-info">
      <i class="fas fa-info-circle me-2"></i>图书馆中没有符合条件的图书。
    </div>
  {% endif %}
  
  {% if perms.catalog.can_mark_returned %}
    <div class="mt-4">
      <a href="{% url 'book-create' %}" class="btn btn-success">
        <i class="fas fa-plus me-2"></i>添加新图书
      </a>
    </div>
  {% endif %}
{% endblock %} 